<template>
  <div class="search">

    <div class="s">
      <div class="back"
           @click="back">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <van-search v-model="name"
                  @search="getSearch"
                  class="searchbox"
                  placeholder="请输入搜索关键词"
                  input-align="center" />

      <div class="searchbox-item"
           @click="getSearch">
        <van-icon size="16"
                  color="#FFF"
                  name="search" />搜索
      </div>
    </div>

    <lazy-component>
      <div class="product">
        <div class="product-item"
             v-for="(item, index) in product"
             :key="index">
          <div @click="viewGoodsDetails(item.pid)">
            <span class="ithot"
                  v-if="item.isHot==1">hot</span>
            <div>
              <img class="auto-img"
                   :src="item.smallImg"
                   alt=""
                   v-lazy="item.smallImg">
            </div>
            <div class="name">{{item.name}}</div>
            <div class="enname">{{item.enname}}</div>
          </div>

          <div class="price">
            <div class="price-box"> &yen; {{item.price}}</div>

          </div>
        </div>
      </div>

    </lazy-component>

    <div v-if="noGoods">
      <van-empty description="没有商品" />
    </div>

  </div>
</template>

<script>
export default {
  name: 'Search',

  data () {
    return {
      product: [],
      name: '',
      noGoods: false,
    }

  },

  methods: {
    back () {
      //返回上一级
      this.$router.go(-1);
    },

    //查看商品详情
    viewGoodsDetails (pid) {
      this.$router.push({ name: 'GoodsDetails', params: { pid } })
    },

    getSearch () {
      if (this.name == '') {
        this.$toast('搜索框不能为空！')
        return
      }

      this.axios({
        method: 'get',
        url: '/search',
        params: {
          name: this.name
        }
      }).then(result => {

        if (result.data.code == "Q001") {
          this.product = result.data.result
        }

        if (this.product.length == 0) {
          this.noGoods = true
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  padding-top: 80px;

  .s {
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    z-index: 99999;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding-top: 30px;
    .back {
      font-size: 16px;
      color: #fff;
    }
    .searchbox {
      background-color: #0c34ba;
      width: 270px;
    }
    .searchbox-item {
      color: #fff;
      font-size: 16px;
    }
  }

  .banner {
    width: 100%;
    height: 180px;
  }
  .product {
    background-color: #e6e6e6;
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    .product-item {
      //使最后一个没有右边框
      width: calc(54% - 20px);
      background-color: #fff;
      margin-right: 10px;
      padding: 10px;
      position: relative;
      border-radius: 8px;
      margin-bottom: 10px;
      .ithot {
        position: absolute;
        left: 25px;
        background-color: #0c34ba;
        padding: 5px 5px;
        color: #fff;
        border-radius: 0 0 5px 5px;
      }

      &:nth-child(2n) {
        margin-right: 0;
      }
      .auto-img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
      }
      .name {
        color: #848484;
      }
      .enname {
        color: #848484;
      }
      .price {
        display: flex;
        justify-content: space-between;
        .price-box {
          color: #0c34ba;
          font-weight: bold;
        }
      }
    }
  }
}
</style>